

let oForm = document.querySelector('form');
let sub = document.querySelector('.submit')
let oName = document.querySelector('.name')
let oCall = document.querySelector('.call')
let op = document.querySelector('.p-phone');
let oBody = document.querySelector('tbody');
let oDiv = document.querySelector('.alert');
let oReset = document.querySelector('.reset')


oForm.addEventListener('submit', function (event) {
    event.preventDefault();
})


// 判断
$('.call').on('change', function () {
    let val = $('.call').val();
    if (isNaN(val)) {
        $('.p-phone').css('border', '2px solid red');
        return;

    } else {
        $('.p-phone').css('border', '2px solid green');
    }

})



oBody.addEventListener('click', function (event) {



    //    删除按钮
    if (event.target.className === 'red') {

        if (window.confirm('您确定删除吗?数据宝贵，请谨慎操作') === false) {
            return

        }

        let arr5 = JSON.parse(window.localStorage.massage);
        console.log(arr5);
        console.log(event.target.getAttribute('index'));
        arr5.forEach(function (item, index) {
            //   console.log(index)
            if (Number(event.target.getAttribute('index')) === index) {
                arr5.splice(index, 1);
            }
        })
        console.log(arr5);
        window.localStorage.massage = JSON.stringify(arr5);
        setPage();

        //  修改按钮
    } else if (event.target.className === 'green') {

        $('.body').css('display', 'block');
        $('.alert').css('display', 'block');
    }
})






// 遮罩
oDiv.addEventListener('click', function (event) {
    //    关闭
    if (event.target.className === 'close') {
        console.log(1111)
        $('.body').css('display', 'none');
        // $('.body').slideUp('1000','linear');
        // $('.alert').css('display','none');
        $('.alert').slideUp(1000, 'linear')



    } else if (event.target.className === 'get') {

        let name = $('.name2').val();
        let cal = $('.call2').val();
        let study = $('.s2').val();
        let old = $('.old2').val();
        let money = $('.m2').val();

        if (name === '' || cal === '' || study === '' || old === '' || money === '') {

            window.alert('您还有信息未输入，请完善');
            return;
        }


        let obj = { name: name, phoneNumber: cal, study: study, old: old, money: money };
        // console.log(obj);

        let arr = JSON.parse(window.localStorage.massage);
        // console.log(arr);
        arr.forEach(function (item, index) {
            if (Number(event.target.getAttribute('index')) === index) {

                 arr[index] = obj;
               
            }
        })

        window.localStorage.massage = JSON.stringify(arr);

        setPage();
         $('.name2').val('');
         $('.call2').val('');
         $('.s2').val('');
         $('.old2').val('');
         $('.m2').val('');

        



        //    $('.body').css('display','none');
        //    $('.alert').css('display','none');

    }



})


//  点击保存,动态生成
sub.addEventListener('click', function () {


    let n = oName.value
    let num = oCall.value;
    let stu = $('.study').val();
    let old = $('.old').val();
    let money = $('.money').val();




    if (n === '' || num === '' || stu === '' || old === '' || money === '') {
        window.alert('您还有信息未输入')
        return;
    }



    const obj = { name: n, phoneNumber: num, old: old, money: money, study: stu }
    //   console.log(JSON.stringify(obj));
    let arr = [];


    if (window.localStorage.massage === undefined) {
        arr[0] = obj;
        console.log(arr)
        window.localStorage.massage = JSON.stringify(arr);
    } else {

        let arr1 = JSON.parse(window.localStorage.massage);
        // console.log(arr1);
        arr1.push(obj);
        // arr1.unshift(obj);
        window.localStorage.massage = JSON.stringify(arr1);
    }


    setPage();
    $('.name').val('');
    $('.call').val('');
    $('.study').val('');
    $('.old').val('');
    $('.money').val('');
    $('.p-phone').css('border', '1px solid black');


})




// 重置

oReset.addEventListener('click', function () {

    $('.name').val('');
    $('.call').val('');
    $('.study').val('');
    $('.old').val('');
    $('.money').val('');
    $('.p-phone').css('border', '1px solid black');
})







// 动态生成
// setPage()
function setPage() {

    let arr = JSON.parse(window.localStorage.massage)
    console.log(arr);
    let str = '';

    arr.forEach(function (item, key) {
        // console.log(item);
        // const obj = { name: n, phoneNumber: num, old: old, money: money, study: stu }
        str += `
        <tr>
        <td>${item.name}</td>
        <td>${item.phoneNumber}</td>
        <td>${item.study} </td>
        <td>${item.old}</td>
        <td>${item.money}</td>
        <td class="last"><span class="green">修改</span><span class="red" index=${key}>删除</span > </td>
    </tr>
    `
    })
    $('tbody').html(str);
}